<template>
  <div class="wholeView">
    <el-table :data="tableData" v-loading="tableLoading" :header-cell-style="{
                background: '#0070C0',
                color: '#ffffff'
            }" style="width: 100%">
      <el-table-column prop="indexName" align="center" label="收入完成情况"></el-table-column>
      <el-table-column label="当月完成" align="center">
        <el-table-column prop="thisMonthIncome" align="center" label="本月完成(万元)"></el-table-column>
        <el-table-column prop="hbMonInreaseAmt" align="center" label="较上月增长(万元)"></el-table-column>
        <el-table-column prop="annualBudget" align="center" label="年度预算进度">
            <template slot-scope="scope">
                <span>{{scope.row.annualBudget}}</span><span v-if="scope.row.annualBudget">%</span>
            </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="累计同比" align="center">
        <el-table-column prop="thisYearLjIncome" align="center" label="本年累计(万元)"></el-table-column>
        <el-table-column prop="lastYearLjIncome" align="center" label="上年累计(万元)"></el-table-column>
        <el-table-column prop="tbYearInreaseAmt" align="center" label="增长额(万元)"></el-table-column>
        <el-table-column prop="tbYearInrease" align="center" label="同比增长率">
            <template slot-scope="scope">
                <span>{{scope.row.tbYearInrease}}</span><span v-if="scope.row.tbYearInrease">%</span>
            </template>
        </el-table-column>
        <el-table-column prop="ldIncome" align="center" label="收入拉动贡献(PP)">
            <template slot-scope="scope">
                <span>{{scope.row.ldIncome}}</span><span v-if="scope.row.ldIncome">%</span>
            </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="年度预算完成情况" align="center">
        <el-table-column prop="thisYearBudget" align="center" label="本年预算(万元)"></el-table-column>
        <el-table-column prop="completeYearBudget" align="center" label="年度预算进度">
            <template slot-scope="scope">
                <span>{{scope.row.completeYearBudget}}</span><span v-if="scope.row.completeYearBudget">%</span>
            </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="累计预算完成情况" align="center">
        <el-table-column prop="thisYearBudgetLj" align="center" label="累计预算(万元)"></el-table-column>
        <el-table-column prop="gapOfBudgetLj" align="center" label="累计预算盈缺(万元)"></el-table-column>
      </el-table-column>
      <el-table-column label="本月预算完成情况" align="center">
        <el-table-column prop="thisMonthBudget" align="center" label="本月预算(万元)"></el-table-column>
        <el-table-column prop="thisMonthGap" align="center" label="本月预算盈缺(万元)"></el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import $barCodeApi from "@/api/barCode/index";
export default {
  name: "wholeView",
  components: {

  },
  props: {
    form: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {
      tableLoading: false,
      tableData: [],
    };
  },
  created () { },
  mounted () { },
  methods: {
    getList () {
      this.tableData = [];
      this.tableLoading = true;
      let obj = Object.assign({}, this.form);
      $barCodeApi.getOverAll({ ...obj }, res => {
        if (res.code == 0) {
          this.tableLoading = false;
          this.tableData = res.content;
        }
      });
    },
  }
};
</script>

<style scoped>
.area {
  color: #1890ff;
  cursor: pointer;
}
.breadcrumb {
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.breadItem {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.breadItem > div {
  margin-right: 5px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
}
.breadItem > p {
  padding: 0 10px;
  margin: 0;
}
.breadItem div:hover {
  color: #1890ff;
}
</style>
